<template>
  <input
    :type="type"
    :placeholder="placeholder"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    :class="['base-input', { 'is-invalid': hasError }]"
  />
  <span v-if="hasError" class="error-message">{{ errorMessage }}</span>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'text',
    },
    placeholder: {
      type: String,
      default: '',
    },
    hasError: {
      type: Boolean,
      default: false,
    },
    errorMessage: {
      type: String,
      default: '输入无效',
    },
  },
  emits: ['update:modelValue'],
});
</script>

<style scoped lang="less">
.base-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s ease;

  &.is-invalid {
    border-color: red;
  }
}

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 4px;
}
</style>